<template>
  <div class="link flex">
    <table border="1" class="tabledata">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px; font-weight: bold">
          甲醇生产情况
        </td>
      </tr>
      <tr>
        <td rowspan="4">生产 情况</td>
        <td colspan="4">甲醇产量(t)</td>
        <td rowspan="2">A罐库存(t)</td>
        <td rowspan="2">B罐库存(t)</td>
        <td colspan="4">副盐(包)</td>
        <td colspan="4">耗煤气量(万m³)</td>
        <td colspan="7" rowspan="6">
          <textarea cols="52" rows="7" v-model="inputs.content" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;">{{inputs.content}}</div>
        </td>
      </tr>
      <tr>
        <td colspan="2">日产量</td>
        <td colspan="2">月累计产量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.jcr" v-if="!date.isup"/><span v-else>{{inputs.jcr}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.jcy" v-if="!date.isup"/><span v-else>{{inputs.jcy}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs.agkc" v-if="!date.isup"/><span v-else>{{inputs.agkc}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs.bgkc" v-if="!date.isup"/><span v-else>{{inputs.bgkc}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.fyr" v-if="!date.isup"/><span v-else>{{inputs.fyr}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.fyy" v-if="!date.isup"/><span v-else>{{inputs.fyy}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.hmr" v-if="!date.isup"/><span v-else>{{inputs.hmr}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.hmy" v-if="!date.isup"/><span v-else>{{inputs.hmy}}</span></td>
      </tr>
      <tr>
        <td colspan="2">{{ Number(inputs.agkc)+Number(inputs.bgkc) }}</td>
      </tr>
      <tr>
        <td rowspan="2">煤气组分分析</td>
        <td colspan="2">总碳(%)</td>
        <td colspan="2">CO(%)</td>
        <td colspan="2">CO2(%)</td>
        <td colspan="2">CH4(%)</td>
        <td colspan="2">H2(%)</td>
        <td colspan="2">N2(%)</td>
        <td colspan="2">O2(%)</td>
      </tr>
      <tr>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zt" v-if="!date.isup"/><span v-else>{{inputs.zt}}&nbsp;</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.co" v-if="!date.isup"/><span v-else>{{inputs.co}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.co2" v-if="!date.isup"/><span v-else>{{inputs.co2}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.ch4" v-if="!date.isup"/><span v-else>{{inputs.ch4}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.h2" v-if="!date.isup"/><span v-else>{{inputs.h2}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.n2" v-if="!date.isup"/><span v-else>{{inputs.n2}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.o2" v-if="!date.isup"/><span v-else>{{inputs.o2}}</span></td>
      </tr>
      <tr>
        <td rowspan="3">气柜</td>
        <td colspan="2">气柜高度(m)</td>
        <td colspan="2">湿脱硫出口平均煤气流量(m³/h)</td>
        <td colspan="2">进口压力(Kpa)</td>
        <td colspan="2">送净化废水(t)</td>
        <td rowspan="3">湿脱硫</td>
        <td colspan="4">H2S(mg/Nm³)</td>
        <td colspan="2">一期</td>
        <td colspan="2">二期</td>
        <td colspan="2">三期</td>
        <td colspan="2">低压蒸汽压力(Mpa)</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2"><input type="number" class="dinput" v-model="inputs.qggd" v-if="!date.isup"/><span v-else>{{inputs.qggd}}</span></td>
        <td rowspan="2" colspan="2"><input type="number" class="dinput" v-model="inputs.mqll" v-if="!date.isup"/><span v-else>{{inputs.mqll}}</span></td>
        <td rowspan="2" colspan="2"><input type="number" class="dinput" v-model="inputs.jkyl" v-if="!date.isup"/><span v-else>{{inputs.jkyl}}</span></td>
        <td rowspan="2" colspan="2"><input type="number" class="dinput" v-model="inputs.jhfs" v-if="!date.isup"/><span v-else>{{inputs.jhfs}}</span></td>
        <td colspan="4">入口</td>
        <td colspan="6"><input type="number" class="dinput" v-model="inputs.rukou" v-if="!date.isup"/><span v-else>{{inputs.rukou}}</span></td>
        <td colspan="2" rowspan="2"><input type="number" class="dinput" v-model="inputs.zqyl" v-if="!date.isup"/><span v-else>{{inputs.zqyl}}</span></td>
      </tr>
      <tr>
        <td colspan="4">出口</td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.chukou1" v-if="!date.isup"/><span v-else>{{inputs.chukou1}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.chukou2" v-if="!date.isup"/><span v-else>{{inputs.chukou2}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.chukou3" v-if="!date.isup"/><span v-else>{{inputs.chukou3}}</span></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name="jcscqk">
import cache from "@/utils/cache";
import { getJcscqk, jcscqkSave, jcscqkSubmit } from "@/api/report";
let obj = {
  jcr:0,
  jcy:0,
  agkc:0,
  bgkc:0,
  fyr:0,
  fyy:0,
  hmr:0,
  hmy:0,
  zt:0,
  co:0,
  co2:0,
  ch4:0,
  h2:0,
  n2:0,
  o2:0,
  qggd:0,
  mqll:0,
  jkyl:0,
  jhfs:0,
  rukou:0,
  chukou1:0,
  chukou2:0,
  chukou3:0,
  zqyl:0,
  content:'记事：'
}
// 整表 数据绑定
const inputs = ref(obj);


const save = async () => {
  let userInfo = cache.get('userInfo')
  await jcscqkSave({
    inputs:inputs.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
const uuuu = ref(cache.get('role_name'))
// 提交方法，调用接口
const submit = async () => {
  await jcscqkSubmit({
    label:uuuu.value,
    date:date.date,
  })
}


onMounted(() => {
  getData()
})

const getData = async () => {
  getJcscqk(date).then((res)=>{
    if(res.length==0){
      inputs.value = obj
    }else{
      inputs.value = res
    }
  })
}
const date = defineProps(['date','isup'])
watch(date, async (n) => {
  getData()
})

defineExpose({
  save,
  submit
})
</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
